import { useStorage } from "@vueuse/core";
import { defineStore } from "pinia";
import { reactive } from "vue";

// setup
export const useAppStore = defineStore("app", () => {
    // state
    const sidebarStatus = useStorage("sidebarStatus", "closed");
    const sidebar = reactive({
        opened: sidebarStatus.value !== "closed",
        withoutAnimation: false
    })
    // actions
    function toggleSidebar() {
        sidebar.opened = !sidebar.opened;
        if (sidebar.opened) {
            sidebarStatus.value = "opened";
        } else {
            sidebarStatus.value = "closed";
        }
    }
    
    return { sidebar, toggleSidebar };
})